import React, { Component } from "react";

const Header = (props) => {
  // console.log(props);

  //函数式组件默认的时候,函数的参数就是我们要的 props
  return (
    <>
      <div>欢迎来到 {props.name} 班级</div>
      <div>{props.num}</div>
      <div>{String(props.bool)}</div>
    </>
  );
};  

//定义函数式组件中的默认值
//如果父组件有传递值,那么我们就使用父组件传递的值,
//如果父组件不传递的话,就使用默认值
Header.defaultProps = {
  name:'H5-2218'
}


//类组件需要通过 this.props 来进行传递参数的接收获取
//在函数式组件中没有 this
//类组件中需要通过 this 进行访问
//
class Content extends Component {

  /* 
    类继承的时候,子类可以继承父类的所有属性和方法,且可以扩展新的属性和方法
    父类中定义的静态私有属性和方法是无法被继承的
  */

  // static定义一个静态私有属性和方法用的
  
  // static defaultProps = {
  //   contentName:'张二'
  // }

  render() {
    // console.log(this);
    return (
      <>
        <div> {this.props.contentName} 学习 React 实际上就是在学 JavaScript </div>
      </>
    );
  }
}

//类组件也可以通过 defaultProps 来定义默认值
// Content.defaultProps = {
//   contentName:'张三'
// }



export default class App extends Component {
  render() {
    return (
      <div>
        {/* 属性传值的时候,只要不是纯字符串,我们都要加 {} */}
        <Header name="H5-2217" num={10} bool={true}></Header>
        <Content contentName='张一' />
      </div>
    );
  }
}
